import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Row, Col, Icon } from 'antd'
import queryString from 'query-string'
import { Page, List, Card } from '../../components'
import { NumberCard } from './components'
import style from './index.less'

function Dashboard ({ dashboard, loading, location, dispatch }) {
  location.query = queryString.parse(location.search)
  const { sales, numbers, list, pagination } = dashboard
  const { pageSize } = pagination
  const CardProps = {
    pathName: '/exchangerate',
    dispatch,
    dataSource: list,
    location,
    ShowNames: [
      'Currency Code  ',
      'Buy T/T',
      'Buy Cash',
      'Sell T/T',
      'Sell Cash',
      'Exchange Rate',
      'Update time',
    ],
    RowTotal: 5,
    EachColRender: [
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p className={style.pStyle1}>
                <span className={style.spanStyle1} style={{ backgroundColor: 'rgb(248, 200, 46)' }}>
                  {currentRow.currencyCodeFrom} <Icon type="swap-right"/> {currentRow.currencyCodeTo}
                </span>
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p className={style.pStyle1}>
                {currentRow.buyingBankRate1}
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p style={{ textAlign: 'center' }}>
                <span className={style.spanStyle} style={{ backgroundColor: 'rgb(143, 201, 251)' }}>
                  {currentRow.buyingRate1}
                </span>
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p className={style.pStyle1}>
                {currentRow.sellingBankRate1}
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p style={{ textAlign: 'center' }}>
                <span className={style.spanStyle} style={{ backgroundColor: 'rgb(246, 152, 153)' }}>
                  {currentRow.sellingRate1}
                </span>
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          return (
            <Col span={width}>
              <p className={style.pStyle1}>
                {currentRow.exchangeRate1}
              </p>
            </Col>
          )
        },
      },
      {
        ColRender: (currentRow, width) => {
          let time = currentRow.updateTime1
          let timeArr = time.split(' ')
          let timeYMD = timeArr[0].split('-')
            .reverse()
          let timeFomat = timeYMD[0] + '/' + timeYMD[1] + ' ' + timeArr[1]
          return (
            <Col span={width}>
              <p className={style.pStyle1}>
                {timeFomat}
              </p>
            </Col>
          )
        },
      },
    ],
  }
  const numberCards = numbers.map((item, key) => (<Col key={key} lg={6} md={12}>
    <NumberCard {...item} />
  </Col>))

  return (
    <div>
      <Row>
        <Col offset={2} span={24}>
          <Card {...CardProps} />
        </Col>
      </Row>
    </div>
  )
}

Dashboard.propTypes = {
  dashboard: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ dashboard, loading }) => ({ dashboard, loading }))(Dashboard)
